<template>
    <div>
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分组品牌管理</el-breadcrumb-item>
            <el-breadcrumb-item>分组管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="7">
                <h1>所有分组</h1>

                <div class="block">
<!--                  <el-button size="mini" type="success" @click="showAddSpecGroupMethod(0)">添加</el-button>-->
                  <el-input
                    v-model="searchCategory"
                    size="mini"
                    placeholder="输入关键字搜索"/>
                  <el-tree
                    style="font-size: 20px"
                    :data="categories.filter(item => !searchCategory || item.name.toLowerCase().includes(searchCategory.toLowerCase()))"
                    node-key="id"
                    :props="defaultProps"
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}</span>
                      <span>
                        <el-link
                          v-if="data.categoryVOList == null"
                          type="primary"
                          size="mini"
                          @click="() => showAddSpecGroupMethod(data)">
                          添加分组
                        </el-link>&nbsp;&nbsp;&nbsp;
                        <el-link
                          type="warning"
                          v-if="data.categoryVOList == null"
                          size="mini"
                          @click="() => getCidBySpecGroup(data)">
                          查看分组
                        </el-link>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </el-col>
            </el-row>
        </el-card>
        <!-- 添加对话框 -->
      <el-drawer
        size="40%"
        title="添加分组"
        :before-close="cancelAddSpecGroupForm"
        :visible.sync="addSpecGroupDialogVisible"
        ref="addDrawer">
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" ref="addSpecGroupForm" :model="addSpecGroupForm" label-width="80px">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="基本信息"  name="first">
                <el-form-item label="分类名称：" label-width="100px" prop="name" >
                  <span><b>{{optionName}}</b></span>
                </el-form-item>
                <el-form-item label="分组名称：" label-width="100px" prop="name" >
                  <el-input v-model="addSpecGroupForm.name" ></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelAddSpecGroupForm">取 消</el-button>
            <el-button type="primary" @click="addSpecGroup">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 查询分组 -->
      <el-drawer
        size="40%"
        :title="optionName"
        :before-close="cancelShowSpecGroupForm"
        :visible.sync="showSpecGroupDialogVisible"
        ref="showSpecGroup">
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-row :gutter="20">
            <el-col :span="11">
              &nbsp;
            </el-col>
            <el-col :span="10">
              <el-input
                v-model="searchSpecGroup"
                size="mini"
                placeholder="输入关键字搜索"/>
            </el-col>
          </el-row>
          <el-table
            :data="specGroups.filter(item => !searchSpecGroup || item.name.toLowerCase().includes(searchSpecGroup.toLowerCase()))"
            style="width: 80%;left: 40px">
            <el-table-column
              label="编号"
              prop="id">
            </el-table-column>
            <el-table-column
              label="分组名"
              prop="name">
            </el-table-column>
            <el-table-column
              width="200px"
              align="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="updateSpecGroupMethod(scope.row)">修改分组</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="showSpecParamMethod(scope.row)">查看参数</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>

      <!--查询分组对应的销售属性和通用规格参数-->
      <el-drawer
          size="40%"
          :title="groupName"
          :before-close="cancelShowSpecParamForm"
          :visible.sync="showSpecParamDialogVisible"
          ref="updateC3Drawer">
          <!-- 对话框主体内容 -->
          <div class="demo-drawer__content">
            <el-button type="primary" size="mini" @click="addSpecParamMethod()">{{'添 加' }}</el-button>
            <el-row :gutter="20">
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="19">
                <el-tabs v-model="activeName" style="left: 5px">
                  <el-tab-pane label="规格参数" name="first">
                    <el-table
                      :data="specParams.filter(item => item.generic)"
                      style="width: 100%;left: 20px">
                      <el-table-column
                        label="#"
                        type="index">
                      </el-table-column>
                      <el-table-column
                        label="名称"
                        prop="name">
                      </el-table-column>
                      <el-table-column
                        label="单位"
                        prop="unit">
                      </el-table-column>
                      <el-table-column
                        width="100px"
                        align="right">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            @click="editSpecParamMethod(scope.row)">修改</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="销售属性" name="sell">
                    <el-table
                      :data="specParams.filter(item => ! item.generic)"
                      style="width: 100%;left: 20px">
                      <el-table-column
                        label="#"
                        type="index">
                      </el-table-column>
                      <el-table-column
                        label="名称"
                        prop="name">
                      </el-table-column>
                      <el-table-column
                        label="单位"
                        prop="unit">
                      </el-table-column>
                      <el-table-column
                        width="100px"
                        align="right">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            @click="editSpecParamMethod(scope.row)">修改</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </div>
        </el-drawer>

      <!--添加规格参数-->
      <el-drawer
        size="40%"
        :title= "groupName"
        :before-close="cancelAddSpecParamForm"
        :visible.sync="addSpecParamDialogVisible"
        >
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" :model="addSpecParamForm" label-width="80px">
            <el-tabs v-model="activeAddSpecParamName" >
              <el-tab-pane label="添加属性"  name="first">
                <el-form-item label="名称：" prop="name" >
                  <el-input v-model="addSpecParamForm.name" ></el-input>
                </el-form-item>
                <el-form-item  label="类型：" prop="generic">
                  <el-switch
                    v-model="addSpecParamForm.generic"
                    active-text="通用"
                    inactive-text="销售">
                  </el-switch>
                </el-form-item>
                <el-form-item label="数字：" prop="isNum" >
                  <el-switch
                    v-model="addSpecParamForm.isNum"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
                <el-form-item label="搜索：" prop="searching" >
                  <el-switch
                    v-model="addSpecParamForm.searching"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
                <el-form-item v-if="addSpecParamForm.isNum" label="单位：" prop="unit" >
                  <el-input v-model="addSpecParamForm.unit" ></el-input>
                </el-form-item>
                <el-form-item v-if="addSpecParamForm.searching" label="参数：" prop="segments" >
                  <el-input v-model="addSpecParamForm.segments" ></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelAddSpecParamForm">取 消</el-button>
            <el-button type="primary" @click="addSpecParam">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>

      <!--修改规格参数-->
      <el-drawer
        size="40%"
        :title= "groupName"
        :before-close="cancelEditSpecParamForm"
        :visible.sync="editSpecParamDialogVisible"
      >
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" :model="editSpecParamForm" label-width="80px">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="添加属性"  name="first">
                <el-form-item label="名称：" prop="name" >
                  <el-input v-model="editSpecParamForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="数字：" prop="isNum" >
                  <el-switch
                    v-model="editSpecParamForm.isNum"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
                <el-form-item label="搜索：" prop="searching" >
                  <el-switch
                    v-model="editSpecParamForm.searching"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
                <el-form-item v-if="editSpecParamForm.isNum" label="单位：" prop="unit" >
                  <el-input v-model="editSpecParamForm.unit" ></el-input>
                </el-form-item>
                <el-form-item v-if="editSpecParamForm.searching" label="参数：" prop="segments" >
                  <el-input v-model="editSpecParamForm.segments" ></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelEditSpecParamForm">取 消</el-button>
            <el-button type="primary" @click="editSpecParam">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>

      <!-- 修改分组 -->
      <el-drawer
        size="40%"
        title="修改分组"
        :before-close="cancelEditSpecGroupForm"
        :visible.sync="editSpecGroupDialogVisible"
        ref="updateDawer">
        <!-- 对话框主体内容 -->
        <div class="demo-drawer__content">
          <el-form style="position: absolute; left: 40px" :model="editSpecGroupForm" label-width="80px">
            <el-tabs v-model="activeName" >
              <el-tab-pane label="基本信息"  name="first">
                <el-form-item label="分组名称" prop="name" >
                  <el-input v-model="editSpecGroupForm.name" ></el-input>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <div class="demo-drawer__footer" style="
            position:absolute;
            left: 400px;
            top: 70%">
            <el-button @click="cancelEditSpecGroupForm">取 消</el-button>
            <el-button type="primary" @click="editSpecGroup">{{'确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 树形控件默认参数
      defaultProps: {
        children: 'categoryVOList',
        label: 'name',
        value: 'id'
      },
      // tabs标签页显示内容
      activeName: 'first',
      activeAddSpecParamName: 'first',
      // 是否显示添加对话框
      addSpecGroupDialogVisible: false,
      // 是否显示分类对应分组
      editSpecGroupDialogVisible: false,
      showSpecGroupDialogVisible: false,
      showSpecParamDialogVisible: false,
      addSpecParamDialogVisible: false,
      editSpecParamDialogVisible: false,
      // 添加表单对象
      addSpecGroupForm: {
        name: '',
        id: '',
        cid: ''
      },
      // 修改规格分组
      editSpecGroupForm: {
        name: '',
        id: '',
        cid: ''
      },
      // 规格参数
      addSpecParamForm: {
        id: '',
        cid: '',
        name: '',
        groupId: '',
        isNum: false,
        unit: '',
        generic: false,
        searching: false,
        segments: ''
      },
      // 规格参数
      editSpecParamForm: {
        id: '',
        cid: '',
        name: '',
        groupId: '',
        isNum: false,
        unit: '',
        generic: false,
        searching: false,
        segments: ''
      },
      // 所有分类
      categories: [],
      // 分组对应的所有规格参数
      specParams: [],
      // 分类对应的分组
      specGroups: [],
      // 当前操作名称（title）
      optionName: '',
      groupName: '',
      // 搜索分类条件
      searchCategory: '',
      // 搜索分组条件
      searchSpecGroup: ''
    }
  },
  methods: {
    // 显示添加组框
    showAddSpecGroupMethod (data) {
      this.addSpecGroupForm.cid = data.id
      this.optionName = data.name
      this.addSpecGroupDialogVisible = true
    },
    // 关闭窗体
    cancelShowSpecParamForm() {
      this.activeName = 'first'
      this.showSpecParamDialogVisible = false
    },
    cancelEditSpecGroupForm() {
      this.editSpecGroupDialogVisible = false
    },
    cancelAddSpecParamForm() {
      // this.addSpecParamForm = Object.assign({}, this.$options.data().formData)
      this.addSpecParamDialogVisible = false
    },
    cancelShowSpecGroupForm() {
      this.showSpecGroupDialogVisible = false
    },
    cancelAddSpecGroupForm() {
      this.addSpecGroupDialogVisible = false
    },
    cancelEditSpecParamForm() {
      this.editSpecParamDialogVisible = false
    },
    // 获取所有分类
    async getAllCategory () {
      const { data: result } = await this.$http.get('category-server/category/getAll')
      this.categories = result.data
    },
    // 获取当前分类的分组
    getCidBySpecGroup (data) {
      this.optionName = data.name + '：分组'
      this.selSpecGroup(data.id)
      this.showSpecGroupDialogVisible = true
    },
    // 根据分类id查询所有分组
    selSpecGroup (id) {
      this.$http.get('category-server/tb-spec-group/byId/' + id).then(resp => {
        this.specGroups = resp.data.data
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    // 添加分组
    addSpecGroup () {
      this.$http.post('category-server/tb-spec-group/add', this.addSpecGroupForm).then(resp => {
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('添加成功!')
          this.addSpecGroupDialogVisible = false
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    // 修改分组
    editSpecGroup () {
      // 1、修改数据到数据库
      this.$http.post('category-server/tb-spec-group/update', this.editSpecGroupForm).then(resp => {
      // 2、根据返回结果进行弹出提示
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('修改成功！')
          // 4、刷新表格数据
          this.selSpecGroup(this.editSpecGroupForm.cid)
          // 3、关闭对话框
          this.editSpecGroupDialogVisible = false
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    // 显示修改分组对话框
    updateSpecGroupMethod(row) {
      this.editSpecGroupForm.id = row.id
      this.editSpecGroupForm.cid = row.cid
      this.editSpecGroupForm.name = row.name
      this.editSpecGroupDialogVisible = true
    },
    // 显示对应分组的规格参数
    showSpecParamMethod (row) {
      this.groupName = '分组：' + row.name
      this.addSpecParamForm.cid = row.cid
      this.addSpecParamForm.groupId = row.id
      this.showParam(row.id)
      this.showSpecParamDialogVisible = true
    },
    // 显示规格参数
    showParam (id) {
      this.$http.get('category-server/tb-spec-param/byId/' + id).then(resp => {
        this.specParams = resp.data.data
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    // 添加规格参数
    addSpecParamMethod () {
      this.addSpecParamDialogVisible = true
    },
    addSpecParam () {
      const cid = this.addSpecParamForm.cid
      const groupId = this.addSpecParamForm.groupId

      this.$http.post('category-server/tb-spec-param/add', this.addSpecParamForm).then(resp => {
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('添加成功!')
          this.addSpecParamForm = Object.assign({}, this.$options.data().formData)
          this.addSpecParamForm.cid = cid
          this.addSpecParamForm.groupId = groupId
          this.showParam(groupId)
          this.addSpecParamDialogVisible = false
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    },
    editSpecParamMethod (row) {
      this.editSpecParamForm = row
      this.editSpecParamDialogVisible = true
    },
    editSpecParam () {
        // 1、修改数据到数据库
      this.$http.post('category-server/tb-spec-param/update', this.editSpecParamForm).then(resp => {
        // 2、根据返回结果进行弹出提示
        if (resp.data.result === 'SUCCESS') {
          this.$message.success('修改成功！')
          // 4、刷新表格数据
          this.showParam(this.editSpecParamForm.groupId)
          // 3、关闭对话框
          this.editSpecParamDialogVisible = false
        } else {
          this.$message.error(resp.data.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    }
  },
  created () {
    this.getAllCategory()
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.photo {
  width: 50px;
  height: 50px;
  border-radius: 5px
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-dialog__footer {
  border-top: 1px solid #e8eaec;
}

</style>
